<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    <title>测试结果</title>
  </head>
  <!-- end header -->
  <body>
    <div class="page-group">
      <div class="page page-current" style="background: #ffde00;">
        <div class="content">
          <div class="questionnaire-share-wrap" style="background: #ffde00; margin-bottom: 2.2rem;">
            <img src="${ctx.resource}/image/questionnaire-share.png" width="100%">
            <div class="questionnaire-share-content">
              <div class="questionnaire-share-title text-center" style="margin-bottom: .5rem;">我的身体测试结果</div>
              <div class="radar-chart text-center">
                <canvas id="ftShareChart" width="200" height="200"></canvas>
              </div>
              <div class="appoint-title text-center" style="margin-top: .25rem; margin-bottom: 0;"><span>运动测试得分：<em style=" font-style: inherit; font-size: .9rem; font-weight: 500;">${questionnaire.scoreTotal*2}<small style="font-size: 60%; margin-left: 2px;">分</small></em></span></div>
              
              <div class="questionnaire-result">
                <div class="result-title">
                  <p class="text-center" style="margin: 0 auto .25rem; font-size: .7rem;">健身等级称号</p>
                  <img src="${ctx.resource}/image/questionnaire/${course.courseLevel.primary ? 'new' : course.courseLevel.middle ? 'young' : 'old'}-coach.png" width="100%"></div>
                <div class="questionnaire-share-title text-center" style="margin-bottom: 1.5rem;">我的专属打卡课程</div>
                <div class="custom-plan text-center clearfix" style="margin: 0 -.5rem;">
                  <c:forEach var="monthly" items="${monthlyCoursewares}">
                    <div class="pull-left result-item ">
                      <img src="${ctx.resource}/image/questionnaire/questionnaire-cover.png">
                      <p class="ellipsis" style="font-weight: 100;">${monthly.template.name}</p>
                      <p class="ellipsis" style="font-weight: 500;">${monthly.template.description}</p>
                    </div>
                  </c:forEach>
                </div>
              </div>
            </div>
            <div class="questionnaire-share-qrcode clearfix">
              <img class="pull-left" src="${cloud.prod}/${qrcode}">
              <div class="pull-right qrcode-text"><img src="${ctx.resource}/image/fitness.png" style="display:block; margin-bottom: .25rem; width: 4rem;">扫码测试你的身体属性<span style="font-size: .65rem;">定制人马君运动打卡课程</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource root="${ctx.resource}/build" type="script" src="js/page/questionnaire/questionnaire-result-share.js" />
    <script type="text/javascript">
      require(['page/questionnaire/questionnaire-result-share'], function(page) {
        page.init({
          "physicalAttrScores" : "${questionnaire.physicalAttrScores}",
          "sportsKnowledgeScores" : "${questionnaire.sportsKnowledgeScores}",
          "exerciseRegularlyScores" : "${questionnaire.exerciseRegularlyScores}",
          "physicalMentalPleasureScores" : "${questionnaire.physicalMentalPleasureScores}",
          "sportsPracticeSkillScores" : "${questionnaire.sportsPracticeSkillScores}",
        })
      })
    </script>
  </body>
</html>